<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>注册事件两种方式</title>
  <style>
    button {
      border: 1px solid pink;
      border-radius: 30px;
      background-color: #ff7c2d;
      padding: 5px;
    }
  </style>
</head>
<body>
  <button>传统注册事件</button>
  <button>方法监听注册事件</button>
  <button>ie9以前支持 attachEvent</button>
  <script>
    var btns = document.querySelectorAll('button')
    // 1. 传统方式注册事件
    btns[0].onclick = function () {
      alert('hi')
    }
    btns[0].onclick = function () {
      alert('hao a u')
    }
    // 2. 事件侦听注册事件 addEventListener
    // (1) 里面的事件类型是字符串 必定加引号 而且不带on
    // (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
    btns[1].addEventListener('click', function () {
      alert(22)
    })
    btns[1].addEventListener('click', function () {
      alert(33)
    })
    // 3. attachEvent ie9以前的版本支持
    btns[2].attachEvent('onclick', function () {
      alert(11)
    })
  </script>
</body>
</html>